<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>用户注册页面</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <link rel="stylesheet" href="./css/login.css" />
</head>

<body>
  <div class="login-box">
    <form>
      <div class="form-group mb-3">
        <label for="username">用户名</label>
        <!-- 账号 -->
        <input type="text" class="form-control" name="username" id="username" autocomplete="off" />
        <small id="emailHelp" class="form-text text-muted">用户名长度2~15位</small>
      </div>
      <div class="form-group mb-3">
        <!-- 密码 -->
        <label for="password">密码</label>
        <input type="password" class="form-control" name="password" id="password" />
        <small id="emailHelp" class="form-text text-muted">密码长度6~15位</small>
      </div>
      <button type="submit" class="btn btn-primary mb-3" id="btnLogin">注册</button>
      <div class="form-group mb-3">
        <a href="./login.html" style="color: #6c757d">已有账号，去登录</a>
      </div>
    </form>
  </div>

  <script src="./lib/axios.js"></script>
  <script src="./lib/form-value.js"></script>
  <!-- 引入配置的文件   根据代码执行顺序  要放在最后    保证先加载axios  注意顺序-->
  <script src="./base.js"></script>
</body>
<script>
  //配置根路径
  //在base.js文件里

  //项目要发生很多请求


  //注册功能   按钮注册单击事件  找到表单注册submit事件
  document.querySelector('button').addEventListener('click', async function (e) {
    //阻止默认行为
    e.preventDefault()



    //获取账号密码
    // val(表单)   只要表单各项有name属性   即可获取到这项的值
    let data = val(document.querySelector('form'))


    //按照接口文档的要求   提交账号密码
    //因为data 在上面已经有了  名字重复 所以要换个res名字
    const { data: res } = await axios.post('/api/register', data)
    //判断他的状态   0就是成功   1就是有错误   400是密码和长度不对报错      200是用户名不存在    无论哪种问题  服务器响应{status: 1,mess...}
    if (res.status === 0) {
      // console.log(res);
      //成功了就跳转到登录页面
      location.href = './login.html'
    }
  })
    //阻止默认行为
    //获取账号密码
    //按照接口文档要求  提交账号密码
    //注册成功  就跳转到登录页面      如果注册失败 就给提示

</script>

</html>